<template>
  <div>
    <el-card>
      <div slot="header"
        :class="$style.header">
        <div :class="$style.search">
          <span>用户名：</span>
          <el-input v-model="name"
            placeholder="请输入"
            clearable
            @clear="filterChange" />
        </div>
        <div>
          <span>状态：</span>
          <el-select v-model="value"
            placeholder="请选择">
            <el-option v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value" />
          </el-select>
        </div>
        <el-button type="primary"
          @click="filterChange">
          搜索<i class="el-icon-search"></i>
        </el-button>
      </div>
      <el-table :data="tabelData">
        <el-table-column label="用户名">
          <template slot-scope="{row}">
            {{row.member_id}}
          </template>
        </el-table-column>

        <el-table-column label="提现账户"
          align="center">
          <template slot-scope="{row}">
            {{row.account}}
          </template>
        </el-table-column>

        <el-table-column label="真正姓名"
          align="center">
          <template slot-scope="{row}">
            {{row.realname}}
          </template>
        </el-table-column>

        <el-table-column label="申请提现金额"
          align="center">
          <template slot-scope="{row}">
            {{(parseFloat(row.apply_amount)).toFixed(2)}}
          </template>
        </el-table-column>

        <el-table-column label="手续费"
          align="center">
          <template slot-scope="{row}">
            {{(parseFloat(row.taxfee)).toFixed(2)}}
          </template>
        </el-table-column>

        <el-table-column label="实际提现金额"
          align="center">
          <template slot-scope="{row}">
            {{(parseFloat(row.real_amount)).toFixed(2)}}
          </template>
        </el-table-column>

        <el-table-column label="状态"
          align="center">
          <template slot-scope="{row}">
            {{state(row.status)}}
          </template>
        </el-table-column>

        <el-table-column label="申请时间"
          align="center">
          <template slot-scope="{row}">
            {{row.create_time}}
          </template>
        </el-table-column>
        <el-table-column label="操作"
          min-width="100px"
          align="center">
          <template slot-scope="{row}">
            <el-button size="mini"
              type="primary"
              @click="details(row)">详情
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button size="mini"
              @click="examine(row.id)"
              type="danger">审核
              <i class="el-icon-edit"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <Details ref="Details" :item="tableItem"></Details>
    </el-card>
  </div>
</template>
<script>
import Details from './components/Details'
export default {
  components:{
    Details
  },
  data() {
    return {
      tableItem:'',
      value:'',
      name:'',
      options: [
        { label: '全部', value: 0 },
        { label: '未审核', value: 1 },
        { label: '已审核', value: 2 }
      ],
      tabelData: [
        {
          label:'用户名',
          prop:'member_id',
        },
        {
          label:'提现账户',
          prop:'account',
        },
        {
          label:'真正姓名',
          prop:'realname',
        },
        {
          label:'申请提现金额',
          prop:'apply_amount',
        },
        {
          label:'手续费',
          prop:'taxfee',
        },
        {
          label:'实际提现金额',
          prop:'real_amount',
        },
        {
          label:'状态',
          prop:'status',
        },
        {
          label:'申请时间',
          prop:'create_time',
        },
      ]
    }
  },
  created(){
    this.getData();
  },
  methods: {
    filterChange() {
      this.nowPage === 1 ? this.getData() : (this.nowPage = 1)
    },
    getData(){
      this.$http.get('/Manage/cash/lists',{
        params:{
          page:this.page,
          rows:10,
          keywords:this.name,
          state:this.value
        }
      })
      .then(res=>{
        if(res.code===1){
          this.tabelData = res.data.list;
        }
      })
    },
    state(type) {
      if (type === 1) {
        return '未审核'
      } else if (type === 2) {
        return '已审核'
      }
    },
    details(data) {
      this.tableItem = data; 
      this.$refs.Details.isDialog = true
    },
    examine(id) {
      this.$prompt('请输入理由', '提示', {
          confirmButtonText: '同意',
          cancelButtonText: '拒绝退款',
          // showCancelButton:false,
          inputPattern:/^[\s\S]*.*[^\s][\s\S]*$/ ,
          inputErrorMessage: '理由不能为空'
        }).then(({ value }) => {
          this.$http.post('/Manage/cash/agree',{
            id:id,
            remark:value
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消审核'
          });       
        });
    }
  }
}
</script>
<style lang="scss" module>
.header {
  display: flex;
  align-items: center;

  > div {
    flex-grow: 0;
    flex-shrink: 0;

    &:not(:last-child) {
      margin-right: 20px;
    }

    > span {
      margin-right: 5px;
    }
  }

  .search {
    display: flex;
    align-items: center;

    > div {
      width: 200px;
    }
  }

  [space] {
    flex-grow: 1;
  }
}
</style>